<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>h5-1</title>
    </head>
    <body>
        <h1>This is h1 tag1</h1>

        <canvas id="myCanvas" width="300" height="200"
            style="border: 1px solid black;"></canvas>

        <script>
        var o = document.getElementById("myCanvas");
        var ctx = o.getContext("2d");
        ctx.fillStyle = "red";
        ctx.fillRect(0, 0, 150, 80);

        ctx.moveTo(10, 10);
        ctx.lineTo(190, 70);
        ctx.stroke(); //绘制直线

        ctx.beginPath();
        /*
        arc(x,y,r,start,stop)
            x:圆心在x轴上的坐标
            y:圆心在y轴上的坐标
            r:半径长度
            start:起始角度，以弧度表示，圆心平行的右端为0度
            stop:结束角度，以弧度表示
        */
        ctx.arc(80, 50, 30, 0, 2 * Math.PI);
        ctx.stroke();//绘制圆

        ctx.font = "30px Arial";
        ctx.strokeText("Hello World", 100, 50); //绘制文本

        /*
        createRadialGradient(x , y , r , x1 , y1 , r1) 括号内参数含义如下:
            x: 渐变的开始圆的 x 坐标
            y: 渐变的开始圆的 y 坐标
            r: 开始圆的半径
            x1: 渐变的结束圆的 x 坐标
            y1: 渐变的结束圆的 y 坐标
            r1: 结束圆的半径
        */
        var gcd = ctx.createLinearGradient(0, 0, 170, 10); //创建线性渐变
        gcd.addColorStop(0, "red");
        gcd.addColorStop(1, "blue");

        //设置填充样式
        ctx.fillStyle = gcd;
        ctx.fillRect(100, 80, 150, 80); //绘制矩形

    </script>

        <p> image </p>
        <img id="myImg" src="huoguo.png" alt="百度logo" weight="300" height="300">

        <p> canvas </p>
        <canvas id="myCanvas2" width="220" height="220"
            style="border: 1px solid #ccc;"></canvas>

        <script>
        var o2 = document.getElementById("myCanvas2");
        var ctx2 = o2.getContext("2d");
        var img = document.getElementById("myImg");
        img.onload = function() {
            ctx2.drawImage(img, 0, 0);
        }
    </script>

        <p> svg矢量图形1 </p>
        <svg xmlns="1.png" version="1.1">
            <circle cx="90" cy="90" r="80" stroke="black" stroke-width="3"
                fill="red" />
        </svg>

        <p> svg矢量图形2 </p>
        <svg xmlns="1.png" version="1.1">
            <polygon points="100,10 40,198 190,78 10,78 160,198" stroke="black"
                stroke-width="3" fill="red"
                style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
        </svg>

        <p> math </p>
        <math xmlns="http://www.w3.org/1998/Math/MathML">
            <mrow>
                <mi>x</mi><mn>2</mn>
                <mo>+</mo>

                <mi>y</mi><mn>2</mn>
                <mo>=</mo>

                <mi>z</mi><mn>2</mn>
            </mrow>

        </math>

        <br>
        <math xmlns="http://www.w3.org/1998/Math/MathML">
            <mrow>
                <mi>x</mi>
                <mo>=</mo>
                <mfenced open="[" close="]">
                    <mtable>
                        <mtr>
                            <mtd><mi>x</mi></mtd>
                            <mtd><mi>y</mi></mtd>
                            <mtd><mi>z</mi></mtd>
                        </mtr>
                        <mtr>
                            <mtd><mi>1</mi></mtd>
                            <mtd><mi>2</mi></mtd>
                            <mtd><mi>3</mi></mtd>
                        </mtr>
                    </mtable>
                </mfenced>
            </mrow>

        </math>

        <p>选择颜色</p>
        <input type="color" id="color">

        <p>表单元素</p>
        <input type="text" list="myList">
        <datalist id="myList">
            <option value="apple"></option>
            <option value="banana"></option>
            <option value="orange"></option>
            <option value="grape"></option>
            <option value="watermelon"></option>
        </datalist>

        <p id="myRange">范围条v:</p>
        <input type="range" min="0" max="100" value="50"
            onchange="onchangeRange(this)">
        <script>
        //document.getElementById('myRange').innerHTML='范围条v:'+this.value
        function onchangeRange(O) {
            var x = document.getElementById('myRange');
            x.innerHTML = "范围条v:"+O.value;
           // alert(o.value);
        }
    </script>

        <form action method="post">
            <input type="number" step="2">
            <input type="submit">
        </form>

        <p>keggen</p>
        用户:<input type="text" name="username" placeholder="11">
        加密<kengen name="password"></kengen>

    </body>
</html>

<!-- https://www.runoob.com/html/html5-web-sql.html -->
